<template>
  <transition name="dialog-fade">
    <div class="notice" v-show="ShowMessage">
        <div class="notices">
            <h3>{{title}}</h3>
            <p>{{message}}</p>
            <div class="qr-dialog_headerbtn" @click="btnClick">
              <i class="qr-icon-close"></i>
        </div>
     </div>
    </div>
 </transition>
</template>

<script>
export default {
  name: 'QrNotice',
  mounted() {
    this.ShowMessage = true;
    setTimeout(() => {
       this.ShowMessage =false
    }, this.time)
  },
  data() {
    return {
      title: '',
      message: '',
      ShowMessage: false,
      time:'600000000'
    }
  },
  methods: {
    btnClick() {
         this.ShowMessage = false
    }
  }
}
</script>

<style lang='scss'  scoped>
  .notices {
    width: 330px;
    padding: 14px 26px 14px 13px;
    border-radius: 8px;
    box-sizing: border-box;
    position: fixed;
    left: 35%;
    top: 0px;
    border: 1px solid #ebeef5;
    position: relative;
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.2);
    transition: opacity .3s,transform .3s,left .3s,right .3s,top .4s,bottom .3s;
     h3 {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 5px;
     }
     p {
        font-size: 14px;
     }
  }
   .qr-dialog_headerbtn{
        position: absolute;
        top: 10px;
        right: -10px;
        padding: 0;
        background: transparent;
        border: nqr;
        outline: nqr;
        cursor: pointer;
        width: 40px;
        border: none;
        font-size: 20px;
        .qr-icon-close{
          color: #909399;
        }
      }
.dialog-fade-enter-active{
  animation: fade .3s;
}
.dialog-fade-leave-active{
  animation: fade .3s reverse;
}
@keyframes fade{
  0% {
    opacity: 0;
    transform: translateY(-100px);
  }
  100%{
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
